(function () {
    // 按钮
    let btn = document.getElementById('J_UploadPictureBtn')
    // 进度条
    let progressElem = document.getElementById('J_UploadProgress')
    // 预览
    let previewElem = document.getElementById('J_PicturePreview')

    // 添加点击事件
    btn.addEventListener('click', function () {
        console.log('click')
        // 上传操作
        uploadAction({
            success: function (result) {
                console.log(result)
                if (result && result.success && result.data && result.data.pictureUrl) {
                    previewElem.innerHTML = '<img src="' + result.data.pictureUrl + '" style="max-width: 100%">'
                }
            },
            progress: function (data) {
                if (data && data * 1 > 0) {
                    progressElem.innerText = data
                }
            }
        })
    })

    /**
     * 类型判断
     * @type {Object}
     */
    let UtilType = {
        isPrototype: function (data) {
            return Object.prototype.toString.call(data).toLowerCase();
        },

        isJSON: function (data) {
            return this.isPrototype(data) === '[object object]';
        },

        isFunction: function (data) {
            return this.isPrototype(data) === '[object function]';
        }
    }

    /**
     * form表单上传请求事件
     * @param  {object} options 请求参数
     */
    function requestEvent(options) {
        try {
            let formData = options.formData
            let xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    options.success(JSON.parse(xhr.responseText))
                }
            }
            xhr.upload.onprogress = function (evt) {
                let loaded = evt.loaded
                let tot = evt.total
                let per = Math.floor(100 * loaded / tot)
                options.progress(per)
            }
            xhr.open('post', '/api/upload')
            xhr.send(formData)
        } catch (err) {
            options.fail(err)
        }
    }

    /**
     * 上传事件
     * @param  {object} options 上传参数      
     */
    function uploadEvent(options) {
        let file
        let formData = new FormData()
        let input = document.createElement('input')
        input.setAttribute('type', 'file')
        input.setAttribute('name', 'files')

        input.click()
        input.onchange = function () {
            file = input.files[0]
            formData.append('files', file)

            requestEvent({
                formData,
                success: options.success,
                fail: options.fail,
                progress: options.progress
            })
        }

    }

    /**
     * 上传操作
     * @param  {object} options 上传参数     
     */
    function uploadAction(options) {
        // options如果不是json 返回
        if (!UtilType.isJSON(options)) {
            console.log('upload options is null')
            return
        }
        let _options = {}
        // 上传成功
        _options.success = UtilType.isFunction(options.success) ? options.success : function () { }
        // 上传失败
        _options.fail = UtilType.isFunction(options.fail) ? options.fail : function () { }
        // 上传中
        _options.progress = UtilType.isFunction(options.progress) ? options.progress : function () { }

        uploadEvent(_options)
    }

})()